<template>
  <div class="Edit">
    <shop-header>编辑资料</shop-header>
    <div class="img">
      <img :src="this.$axios.defaults.baseURL + info.head_img" alt="" />
      <van-uploader :after-read="afterRead" class="file" />
    </div>
    <van-cell-group>
      <van-cell
        title="昵称"
        is-link
        :value="info.nickname"
        @click="checkNickname"
      />
      <van-cell title="密码" is-link value="******" />
      <van-cell
        title="性别"
        is-link
        :value="info.gender === 0 ? '女' : '男'"
        @click="checkGender"
      />
    </van-cell-group>
    <van-dialog
      v-model="showImg"
      title="修改头像"
      show-cancel-button
      class="dialogImg"
    >
      <img :src="this.$axios.defaults.baseURL + info.head_img" class="diaImg" />
    </van-dialog>
    <!-- 昵称 -->
    <van-dialog
      v-model="showNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="confirmNickname"
    >
      <van-field v-model="nickname" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 密码 -->
    <van-dialog v-model="showPassword" title="修改密码" show-cancel-button>
    </van-dialog>
    <!-- 性别 -->
    <van-dialog
      v-model="showGender"
      title="修别修别"
      show-cancel-button
      @confirm="confirmGender"
    >
      <van-radio-group v-model="gender">
        <van-cell-group>
          <van-cell title="男" clickable @click="gender = 1">
            <template #right-icon>
              <van-radio :name="1" />
            </template>
          </van-cell>
          <van-cell title="女" clickable @click="gender = 0">
            <template #right-icon>
              <van-radio :name="0" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "",
      showImg: false,
      showNickname: false,
      showPassword: false,
      showGender: false,
      nickname: "",
      gender: "",
    };
  },
  async created() {
    this.getinfo();
  },
  methods: {
    //获取数据
    async getinfo() {
      const id = localStorage.getItem("id");
      const res = await this.$axios.get(`/user/${id}`);
      this.info = res.data.data;
    },
    // 修改后获取axios请求
    async postAxios(data) {
      const id = localStorage.getItem("id");
      const res = await this.$axios.post(`/user_update/${id}`, data);
      this.$toast.success("修改成功");
      this.getinfo();
    },
    // 显示昵称更改框
    checkNickname() {
      this.showNickname = true;
    },
    // 更改后昵称
    async confirmNickname() {
      if (this.nickname.trim() == "" || this.nickname == this.info.nickname) {
        return;
      } else {
        this.postAxios({ nickname: this.nickname });
      }
    },

    // 性别框显示
    checkGender() {
      this.showGender = true;
      this.gender = this.info.gender;
    },
    // 修改性别
    async confirmGender() {
      // const id = localStorage.getItem("id");
      // const res = await this.$axios.post(`/user_update/${id}`, {
      //   gender: this.gender,
      // });
      // this.$toast.success("修改成功");
      // this.getinfo();
      this.postAxios({ gender: this.gender });
    },
    // 更该图片
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      const formdata = new FormData();
      formdata.append("file", file.file);
      const res = await this.$axios.post("/upload", formdata);
      const { url } = res.data.data;
      this.postAxios({ head_img: url });
    },
  },
};
</script>

<style scoped lang="less">
.Edit {
  .img {
    position: relative;
    height: 70px;
    text-align: center;
    display: block;
    .file {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 70px;
      opacity: 0;
    }
    img {
      height: 70px;
      object-fit: contain;
    }
  }
  .dialogImg {
    text-align: center;
    .diaImg {
      height: 50px;
      width: 50px;
      object-fit: contain;
    }
  }
}
</style>
